﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>Web前端学习大纲|Web开发技术-山东师范大学历山学院</title>
    <link href="css/globle.css" rel="stylesheet" />
    <link href="css/introduce.css" rel="stylesheet" />
    <script src="js/index.js"></script>
    <script src="js/designe.js"></script>



</head>

<body>

    <div id="top">

        <div id="top_inner">
            <span class="smalltitle">欢迎进入<font color="#f10215">历山学院课程中心</font></span>

            <ul>
                <li>
                    <a href="#">你好，请登录</a>
                </li>
                <li>
                    <a href="#">我的课程</a>
                </li>
                <li>
                    <a href="#">校园内网</a>
                </li>
                <li>
                    <a href="#">学院新闻</a>
                </li>
                <li>
                    <a href="http://www.lsxy-edu.com/index.html">学校首页</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <img src="img/logo.jpg" width="100" />
        <div id="search_box">
            <input id="search" type="text" placeholder="请搜索课程名或者老师" /><input id="btnsearch" type="button" />
            <div id="hot">
                <ul>
                    <li>
                        <a href="#" style="color: #F10215;">Web设计</a>
                    </li>

                    <li>
                        <a href="#">Java 编程</a>
                    </li>
                    <li>
                        <a href="#">SQL 数据库</a>
                    </li>
                    <li>
                        <a href="#">数据结构</a>
                    </li>
                    <li>
                        <a href="#">计算机组成原理</a>
                    </li>
                    <li>
                        <a href="#">多媒体课程设计</a>
                    </li>

                </ul>

            </div>
        </div>
        <div id="qrcode">
            <a href="javascript:void" id="phone_link">用手机访问</a>
            <img src="img/phone.png" />
        </div>
        <div id="qrcode_block">
            <img src="img/erweima.png" id="img_qrcode" height="100" />
        </div>
    </div>
    <div id="menu">
        <ul id="menu_tools">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li>
                <a href="teacher.html">主讲教师</a>
            </li>
            <li class="active">
                <a href="introduce.html">实践大纲</a>
            </li>
            <li>
                <a href="project.html">实践项目</a>
            </li>
            <li>
                <a href="design.html">课程设计</a>
            </li>
            <li>
                <a href="source.html">教学资源</a>
            </li>
            <li>
                <a href="suggest.html">意见反馈</a>
            </li>
        </ul>
    </div>

    <div id="content">
        <div class="inner_nav">
            <a href="index.html">首页</a>&gt;
            <a href="index.html">网页设计</a>&gt;
            <a href="introduce.html">Web前端设计大纲</a>
        </div>


        <div class="teacher_left">
            <h3 align="center" style="margin-top: 20px;">Web前端学习大纲</h3>

            <div id="subtime">
                2016-07-21 17:32:45
            </div>
            <div class="label">
                标签：<a href="#">Web前端</a><a href="#">Web开发</a><a href="#">Web开发</a>
            </div>

            <div>
                <p class="intro_p">
                    目前移动互联网的发展，给web前端带来前所未有的热潮，很多互联网的公司都急需一大批优秀的web前端工程师。很多人对于web前端需要学习的内容并不是很了解，在这里源代码教育小编跟大家聊聊web前端学习大纲。
                </p>
                <p class="intro_p">
                    首先，学习什么都要从最基础的地方开始。因此，第一个阶段，Web网页基础，熟悉并能够熟练地运用HTML，CSS,DIV+CSS,Photoshop,当然学习这些技术，需要进行实战项目，来更好地掌握。
                </p>
                <p class="intro_p">
                    第二个阶段，Web编程基础，在这个阶段，要对JavaScript基础，BOM+DOM编程,交互效果及动画特效,jQuery,jQuery优质插件有一定的了解及认识，并能够熟练地编程，同样的，每一个阶段都缺一不可就是实战项目。
                </p>
                <p class="intro_p">
                    首先，学习什么都要从最基础的地方开始。因此，第一个阶段，Web网页基础，熟悉并能够熟练地运用HTML，CSS,DIV+CSS,Photoshop,当然学习这些技术，需要进行实战项目，来更好地掌握。
                </p>
                <p class="intro_p">
                    第三个阶段，Web编程高级
                </p>
                <p class="intro_p">
                    JavaScript面向对象，JavaScript高级特性，模块化组件开发，MVC设计模式
                </p>
                <p class="intro_p">
                    第四个阶段，全栈开发
                </p>
                <p class="intro_p">
                    HTTP协议，Node.JS，EXPress，KoaJS，AJAX交互，实战项目
                </p>
                <p class="intro_p">
                    第五个阶段，移动网站开发
                </p>
                <p class="intro_p">
                    HTML5+CSS3，响应式原理及布局，Bootstrap,Less+Sass预处理语言，微信WeUI，实战项目
                </p>
                <p class="intro_p">
                    第六个阶段，框架与项目管理


                </p>
                <p class="intro_p">
                    AngularJs，ReactJS，Grunt/Gulp/Webpack,Bower依赖管理工具，GIT/SVN管理，实战项目

                </p>

                <p class="intro_p">
                    第七个阶段，目前移动开发的热潮一直持续不断，同时也受到很多企业的重视，因此，一个优秀的web前端工程师，懂得移动开发是必须的，学习lonlc+codova，React Native等，实践进行app实战项目。
                </p>
                <p class="intro_p">
                    学完以上阶段，离成为一个优秀的web前端工程师的路就更近了。前端工程师的成长就是一个修炼的过程，修炼的开始就是在学会了那些书本上可以学到的编程知识后。在前端工程师的素质中，小编认为应用能力是最重要的。这种应用能力可看成是一种产品的塑造能力，前提要有产品思维和设计思维，能自主发现并弥补产品、设计的空白和不合理环节，可以很好的控制代码的复杂度，高效高质量的完成开发需求。提升这种能力，纸上谈兵不行，只能在各种项目中摸爬滚打，如同医生不断积累临床经验一样。
                </p>

            </div>

        </div>
        <div class="teacher_right">
            <ul class="list_right">
                <li class="list_title">相关课程大纲</li>
                <li><a href="#">JavaScript大纲</a></li>
                <li><a href="#">Java程序设计大纲</a></li>
                <li><a href="#">C语言程序设计大纲</a></li>
                <li><a href="#">PhotoShop设计大纲</a></li>
                <li><a href="#">Android开发大纲</a></li>

            </ul>
            <ul class="list_right" style="margin-top: 0;">
                <li class="list_title">热点推荐</li>
                <li><a href="#">刘曙光到我校调研指导节...</a></li>
                <li><a href="#">聊城大学东昌学院到我校交流访问</a></li>
                <li><a href="#">我校赴韩国大真大学考察交流</a></li>
                <li><a href="#">人文学院举办优秀学子分享会</a></li>
                <li><a href="#">我校举行纪念“一二九”运动系...</a></li>
                <li><a href="#">我校开展“国家宪法日”主题活动</a></li>
                <li><a href="#">第三届“群英争霸”辩论赛圆满...</a></li>
                <li><a href="#">经济与管理学院特色班赴青州...</a></li>

            </ul>
        </div>

    </div>

    <div id="footer">
        <div id="hr"></div>
        <div id="foot_body">
            <div class="foot_qrcode">
                <div class="qrcode">
                    <img src="img/qrcode_footer.png" height="100" />

                    <div class="qr_title">
                        <h3>
                            手机访问
                        </h3>
                        <p>手机扫一扫即刻访问</p>
                    </div>
                </div>
                <div class="qrcode" style="float: right;margin-right: 100px;">
                    <img src="img/qrcode_footer.png" height="100" />

                    <div class="qr_title">
                        <h3>
                            官方微信
                        </h3>
                        <span>手机扫一扫，学校官方动态，不再错过，来体验微校园吧</span>
                    </div>
                </div>

            </div>

        </div>
        <div id="footer_content">
            <ul>
                <li>
                    <a href="#">关于我们</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">全站地图</a>
                </li>
                <li>
                    <a href="#">意见反馈</a>
                </li>
                <li>
                    <a href="#">人才招聘</a>
                </li>
                <li>
                    <a href="#">媒体报道</a>
                </li>
            </ul>
            <br />
            <center style="margin-top: 20px;color: #666;">
                Copyright © 课程设计网 2006-2016, All Rights Reserved.
            </center>
        </div>
    </div>

    <div id="goto">
        <a href="#">
            <img src="img/top.png" width="30" border="0" />
        </a>

    </div>

</body>

</html>